<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="fonts">
      <el-breadcrumb-item :to="{ path: '/repair' }">内容管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/repair' }"
        >修理厂管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>修改修理厂</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      style="width: 300px; margin-top: 30px"
    >
      <el-form-item label="店铺名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入店铺名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺短名称" prop="shortName">
        <el-input
          v-model="ruleForm.shortName"
          placeholder="请输入店铺短名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺主修品牌" prop="imports">
        <el-select v-model="ruleForm.carBrandId" placeholder="请选择汽车品牌">
          <el-option
            v-for="item in cartables"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺折扣" prop="discount">
        <span style="margin-right: 10px">工时</span>
        <el-input v-model="ruleForm.discount" style="width: 50px"></el-input>
        <span style="margin-left: 10px">折</span>
      </el-form-item>
      <el-form-item label="所在区域" prop="imports">
        <el-select v-model="ruleForm.area" placeholder="请选择区域">
          <div v-for="item in area" :key="item.id">
            <el-option :label="item.name" :value="item.vule"></el-option>
          </div>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺地址" prop="location">
        <el-input
          v-model="ruleForm.location"
          placeholder="请输入店铺地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺是否签约" prop="name">
        <el-radio v-model="ruleForm.sign" label="未签约">未签约</el-radio>
        <el-radio v-model="ruleForm.sign" label="已签约">已签约</el-radio>
      </el-form-item>
      <div>
        <el-button type="primary" style="margin-left: 50px" @click="saveBtn"
          >保存</el-button
        >
        <el-button style="margin-left: 40px" @click="backbtn">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  befordestroy() {
    sessionStorage.removeItem("id");
  },
  data() {
    return {
      cartables: [],
      table: {},
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: "请输入修理厂名称", trigger: "blur" },
        ],
        shortName: [
          { required: true, message: "请输入修理厂短名称", trigger: "blur" },
        ],
        imports: [{ required: true, trigger: "blur" }],
        storeaddress: [
          { required: true, message: "请输入修理厂地址", trigger: "blur" },
        ],
        discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
      },
      area: [
        { id: 1, name: "锦江区", vule: "锦江区" },
        { id: 2, name: "青羊区", vule: "青羊区" },
        { id: 3, name: "金牛区", vule: "金牛区" },
        { id: 4, name: "武侯区", vule: "武侯区" },
        { id: 5, name: "成华区", vule: "成华区" },
        { id: 6, name: "龙泉驿区", vule: "龙泉驿区" },
        { id: 7, name: "青白江区", vule: "青白江区" },
        { id: 8, name: "新都区", vule: "新都区" },
        { id: 9, name: "温江区", vule: "温江区" },
        { id: 10, name: "双流区", vule: "双流区" },
        { id: 11, name: "郫都区", vule: "郫都区" },
        { id: 12, name: "新津区", vule: "新津区" },
        { id: 13, name: "高新区", vule: "高新区" },
        { id: 14, name: "简阳市", vule: "简阳市" },
        { id: 15, name: "都江堰市", vule: "都江堰市" },
        { id: 16, name: "彭州市", vule: "彭州市" },
        { id: 17, name: "邛崃市", vule: "邛崃市" },
        { id: 18, name: "大邑市", vule: "大邑市" },
        { id: 19, name: "蒲江县", vule: "蒲江县" },
        { id: 20, name: "成都天府新区", vule: "成都天府新区" },
      ],
    };
  },
  created() {
    let data = JSON.parse(sessionStorage.getItem("id"));
    this.table = data;
    this.ruleForm = this.table;
    // console.log(this.table);
    // console.log(this.ruleForm.carBrandId);

    //汽车品牌下拉
    this.$axios({
      url: "/carBrand/list",
      method: "POST",
      data: {
        limit: this.count,
      },
    }).then((res) => {
      // console.log(res);
      if (res.data.code === 0) {
        this.cartables = [...res.data.data];
        // console.log(this.cartables);
      }
    });

    //
  },
  methods: {
    // resetForm(ruleForm) {
    //   this.$refs[ruleForm].resetFields();
    // },
    backbtn() {
      this.$router.push("/repair");
    },

    //确认修改请求
    saveBtn() {
      // console.log(this.ruleForm);
      this.$axios({
        url: "/carBrand/list",
        method: "POST",
        data: {
          name: this.ruleForm.carBrandId,
        },
      }).then((res) => {
        // console.log(res.data.data);
        if (res.data.code === 0) {
          res.data.data.forEach((item) => {
            if (this.ruleForm.carBrandId === item.name) {
              this.ruleForm.carBrandId = item.id;
              // console.log(this.ruleForm.carBrandId);
              this.$axios({
                url: "/repairFactory/update",
                method: "POST",
                data: this.ruleForm,
              }).then((res) => {
                // console.log(res);
                // console.log(this.ruleForm.id);
                if (res.data.code === 0) {
                  // console.log(this.ruleForm);
                  this.$message('修改成功');
                  this.$router.push({path:"/repair"})
                }
              });
            }
          });
        }
      });

      // this.$axios({
      //   url: "/carBrand/list",
      //   method: "POST",
      //   data: {
      //     name: this.ruleForm.carBrandId,
      //   },
      // }).then((res) => {
      //   console.log(res);
      //   console.log(this.ruleForm.carBrandId);
      //   // console.log(res.data.data);
      //   if (res.data.code === 0) {
      //     res.data.data.forEach((item) => {
      //       if (this.ruleForm.carBrandId === item.name) {
      //         this.ruleForm.carBrandId = item.id;
      //         console.log(this.ruleForm);
      //         this.$axios({
      //           url: "/repairFactory/update",
      //           method: "POST",
      //           data: this.ruleForm,
      //           params:{
      //             id:this.ruleForm.id
      //           }
      //         }).then((res) => {
      //           console.log(res);
      //           console.log(this.ruleForm.id);
      //           if (res.data.code === 0) {
      //             console.log(this.ruleForm);
      //             this.$router.push({path:"/repair"})
      //           }
      //         });
      //       }
      //     });
      //   }
      // });
    },
  },
};
</script>

<style>
.fonts {
  font-size: 20px;
}
</style>